<template>
	<!-- 视频列表 -->
	<view>
		<image  v-if="banner!=''" :src="banner" mode="scaleToFill" style="width: 94%;margin: 20rpx 3%;border-radius: 30rpx;"></image>
		<!-- 属性标签 -->
		<u-tabs v-if="attrShow" :list="attrList" :is-scroll="true" :current="current" @change="change"></u-tabs>
		<!-- 分类标签 -->
		<u-tabs v-if="cateShow && cateList.length>0" :list="cateList" :is-scroll="true" :current="currentCate" @change="changeCate"></u-tabs>
		<!-- 视频列表 -->
		<view>
			<u-waterfall v-model="videoList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" @click="goUrl('/pages/index/video_desc?id='+item.id)" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							{{item.desc}}
						</view>
						<view class="demo-shop" style="display: flex;justify-content: space-between;">
							<view><u-icon name="eye-fill"  size="28"></u-icon>{{item.read_num}}</view>
							<view><u-icon name="thumb-up-fill"  size="28"></u-icon>{{item.dz_num}}</view>
							<view><u-icon name="star-fill"  size="28"></u-icon>{{item.sc_num}}</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" @click="goUrl('/pages/index/video_desc?id='+item.id)" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							{{item.desc}}
						</view>
						<view class="demo-shop" style="display: flex;justify-content: space-between;">
							<view><u-icon name="eye-fill"  size="28"></u-icon>{{item.read_num}}</view>
							<view><u-icon name="thumb-up-fill"  size="28"></u-icon>{{item.dz_num}}</view>
							<view><u-icon name="star-fill"  size="28"></u-icon>{{item.sc_num}}</view>
						</view>
					</view>
				</template>
			</u-waterfall>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner:'',
				attrList: [],
				attrIdList:[],
				current: 0,
				cateList:[],
				cateIdList:[],
				currentCate:0,
				page:1,
				limit:10,
				total:0,
				videoList:[],
				attrShow:false,
				cateShow:false,
				options:[],
				videocate_id:''
			}
		},
		onLoad(options) {
			var _this = this;
			this.options = options;
			if(!options.videoattr_id){
				this.attrShow = true;
				this.getAttrList();
			}else{
				if(!options.videocate_id){
					this.cateShow = true;
					this.getAttrOptions(options.videoattr_id);
					this.getCateList(options.videoattr_id);
				}else{
					this.videocate_id = options.videocate_id;
					this.getAttrOptions(options.videoattr_id);
					this.getVideoList(options.videocate_id);
				}
				
			}
		},
		onReachBottom() {
			if(this.videoList.length<this.total){
				this.getVideoList(this.videocate_id);
			}
		},
		methods: {
			getAttrOptions(attr_id){
				var _this = this;
				_this.$http('video.getAttrOptions',{
					attr_id:attr_id
				}).then(res=>{
					_this.banner = res.data.image;
				})
			},
			//获取属性
			getAttrList(){
				var _this = this;
				_this.$http('video.getAttrList',{}).then(res=>{
					
					var data = res.data;
					console.log(res.data);
					data.forEach(item=>{
						_this.attrList.push({name:item.title});
						_this.attrIdList.push(item.id);
					})
					this.cateList = [];
					this.cateIdList = [];
					this.getCateList(this.attrIdList[_this.current]);
				})
			},
			//获取指定属性下的分类
			getCateList(videoattr_id){
				var _this = this;
				_this.$http('video.getCateList',{
					videoattr_id:videoattr_id,
				}).then(res=>{
					var data = res.data;
					data.forEach(item=>{
						_this.cateList.push({name:item.title});
						_this.cateIdList.push(item.id);
					})
					this.$refs.uWaterfall.clear();
					this.videoList = [];
					this.page = 1;
					this.getVideoList(this.cateIdList[_this.currentCate]);
				})
			},
			//获取指定分类下的文章
			getVideoList(videocate_id){
				var _this = this;
				_this.$http('video.getVideoList',{
					videocate_id:videocate_id,
					page:_this.page,
					limit:_this.limit,
				}).then(res=>{
					_this.videoList = _this.videoList.concat(res.data.list);
					_this.total = res.data.total;
					_this.page++;
				})
			},
			//切换属性标签
			change(index) {
				this.current = index;
				this.cateList = [];
				this.cateIdList = [];
				this.$refs.uWaterfall.clear();
				this.videoList = [];
				this.getCateList(this.attrIdList[index]);
			}, 
			//切换分类标签
			changeCate(index){
				this.videocate_id = this.cateIdList[index];
				this.currentCate = index;
				this.$refs.uWaterfall.clear();
				this.videoList = [];
				this.page = 1;
				this.getVideoList(this.videocate_id);
			},
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
